<template>
  <view class="my">
    <!--个人信息-->
    <view class="user" v-if="userStore.user.nickname">
      <image :src="userStore.user.avatar" style="width: 60px; height: 60px;border-radius: 40px"
             mode="scaleToFill"></image>
      <text class="nickname">{{ userStore.user.nickname }}</text>
    </view>
    <view class="user-notlogin" v-else>
      <view class="icon">
        <uni-icons type="person" size="50" color="#2979ff"></uni-icons>
      </view>
      <view class="tip-text">
        <text class="nickname">未登录</text>
      </view>

    </view>
    <!--收藏、足迹-->
    <view class="favorite">
      <view class="collect" @tap="viewCollect">
        <text>商品收藏</text>
        <text class="count">{{ state.stat.collectCount }}</text>
      </view>
      <view class="trace" @tap="viewHistory">
        <text>我的足迹</text>
        <text class="count">{{ state.stat.historyCount }}</text>
      </view>
    </view>
    <!--订单区-->
    <view class="order">
      <uni-badge class="uni-badge-left-margin" :text="state.orderStat.waitPay" absolute="rightTop" size="small">
        <view class="box" @tap="viewOrder('UN_PAY')">
          <text class="box-text">待付款</text>
        </view>
      </uni-badge>
      <uni-badge class="uni-badge-left-margin" :text="state.orderStat.waitReceive" absolute="rightTop" size="small">
        <view class="box" @tap="viewOrder('UN_RECEIVED')">
          <text class="box-text">待收货</text>
        </view>
      </uni-badge>
      <uni-badge class="uni-badge-left-margin" :text="state.orderStat.waitReview" absolute="rightTop" size="small">
        <view class="box" @tap="viewOrder('UN_REVIEW')">
          <text class="box-text">待评价</text>
        </view>
      </uni-badge>
      <uni-badge class="uni-badge-left-margin" :text="state.orderStat.afterSale" absolute="rightTop" size="small">
        <view class="box" @tap="viewOrder('AFTER_SALE')">
          <text class="box-text">退换/售后</text>
        </view>
      </uni-badge>
      <view class="box  order-all" @tap="viewOrder('ALL')">
        <text class="box-text">全部订单</text>
      </view>
    </view>
    <!--设置区-->
    <view class="setting">
      <uni-list>
        <uni-list-item clickable @click="viewAddressList" title="收货地址" rightText="管理收货地址 >">收货地址
        </uni-list-item>
        <uni-list-item clickable title="账户与安全" rightText="密码管理 >"></uni-list-item>
        <uni-list-item clickable title="建议反馈" rightText=">"></uni-list-item>
      </uni-list>
    </view>
    <view class="bottom-btn uni-mx-2 uni-radius-lg" v-if="userStore.user.nickname">
      <button size="mini" type="warn" @tap="doLogout">退出</button>
    </view>
    <view @tap="navLogin" class="bottom-btn uni-mx-2 uni-radius-lg" v-else>
      <button size="mini" type="warn">立即登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onShow} from "@dcloudio/uni-app";
import {useUserStore} from "@/stores/user";
import type {UserBriefType} from "@/types/user";
import type {OrderStatType} from "@/types/order";
import {getOrderStat} from "@/services/order";
import {getUserTrace} from "@/services/user";
// 获取屏幕边界到安全区域距离
const {windowHeight} = uni.getWindowInfo()
const userStore = useUserStore()
const state = ref({
  user: {} as UserBriefType,
  orderStat: {
    total: 0,
    waitPay: 0,
    waitReceive: 0,
    waitReview: 0,
    afterSale: 0
  } as OrderStatType,
  stat: {
    collectCount: 0,
    historyCount: 0
  }
})

const resetData = () => {
  state.value.orderStat = {
    total: 0,
    waitPay: 0,
    waitReceive: 0,
    waitReview: 0,
    afterSale: 0
  } as OrderStatType
  state.value.stat = {
    collectCount: 0,
    historyCount: 0
  }
}
const viewOrder = (status: string) => {
  if (!userStore.isLogin()) {
    uni.navigateTo({
      url: "/pagesLogin/settings/login"
    })
    return
  }
  uni.navigateTo({
    url: "/pagesOrder/settings/order?status=" + status,
  })
}

const viewAddressList = () => {
  if (!userStore.isLogin()) {
    uni.navigateTo({
      url: "/pagesLogin/settings/login"
    })
    return
  }
  uni.navigateTo({
    url: "/pagesAddress/settings/settings"
  })
}

const viewCollect = () => {
  if (!userStore.isLogin()) {
    uni.navigateTo({
      url: "/pagesLogin/settings/login"
    })
    return
  }
  uni.navigateTo({
    url: "/pages/my/collect"
  })
}

const viewHistory = () => {
  if (!userStore.isLogin()) {
    uni.navigateTo({
      url: "/pagesLogin/settings/login"
    })
    return
  }
  uni.navigateTo({
    url: "/pages/my/history"
  })
}

const doLogout = () => {
  userStore.logout()
  resetData()
}

const navLogin = () => {
  uni.navigateTo({
    url: "/pagesLogin/settings/login"
  })
}
/**
 * 加载页面的数据
 * 设定加载的数据：
 * 足迹数据、订单数据、个人信息数据
 */
const loadPageData = () => {
  // 获取用户信息
  userStore.reqUserInfo()
  // 获取订单数据
  getOrderStat().then((r) => {
    state.value.orderStat = r.data
  }).catch((e) => {
    uni.showToast({
      title: "获取订单统计数据失败 " + e,
      icon: "none"
    })
    console.log("@getOrderStat ", e)
  })
  // 获取用户足迹的统计数据
  getUserTrace().then((r) => {
    state.value.stat = r.data
  }).catch((e) => {
    uni.showToast({
      title: "获取用户收藏数据失败 " + e,
      icon: "none"
    })
    console.log("@getUserTrace ", e)
  })
}

onShow(() => {
  if (userStore.isLogin()) {
    loadPageData()
  }

})
</script>

<style lang="scss">
.my {
  .user {
    height: 150px;
    background-color: #e43d33;
    background-image: url(https://storage.jd.com/retail-mall/user_myJDHome/prod/2.0.29/css/i/c-01.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;

    .nickname {
      color: #fff;
      font-weight: bold;
      margin-left: 20px;
    }
  }

  .user-notlogin {
    height: 150px;
    //padding: 20px;
    background-color: #e43d33;
    background-image: url(https://uni-starter.dcloud.net.cn/static/img/headers.68625364.png);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .nickname {
      font-weight: bold;
      color: #fff;
    }
  }

  .favorite {
    background-color: $uni-bg-color;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    border-bottom: 1px solid $uni-border-color;

    .collect, .trace {
      .count {
        margin-left: 10px;
        font-weight: bold;
      }
    }
  }

  .order {
    background-color: $uni-bg-color;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 60px;

    .box {
      .box-text {
        font-size: 14px;
      }
    }

    .order-all {
      padding-left: 10px;
      border-left: 1px solid $uni-border-color;
    }
  }

  .setting {
    margin-bottom: 60px;
  }

  .bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    font-size: 14px;

    button {
      display: inline-block;
      width: 100%;
    }
  }
}
</style>
